<template>
  <div class="wpwork-preview-main user-form">
    <el-row class="wpwork-common-search-box" :gutter="16" style="margin-bottom: 10px;">
      <el-form @submit.native.prevent>
        <el-col :span="6">
          <el-form-item label="人员名称">
            <el-input v-model="listQuery.name" placeholder="请输入人员名称" clearable
              @keyup.enter.native="search()" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="起始时间：">
            <el-date-picker v-model="listQuery.startTime" type="datetime" placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="截止时间：">
            <el-date-picker v-model="listQuery.endTime" type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              {{$t('common.search')}}</el-button>
            <el-button icon="el-icon-refresh-right" @click="reset()">{{$t('common.reset')}}
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="wpwork-common-layout-main wpwork-flex-main" style="margin-top: -10px;">
      <wpwork-table v-loading="listLoading" :data="tableData" :hasNO="false">
        <el-table-column prop="realName" label="人员名称" />
        <!-- <el-table-column prop="mobilePhone" label="终端号码" /> -->
        <!-- <el-table-column prop="fenceName" label="围栏名称" /> -->
        <el-table-column prop="remark" label="出入围栏" />
        <el-table-column prop="time" label="出\入围栏时间" :formatter="wpwork.tableDateFormat" />
        <el-table-column label="操作" width="280">
          <template slot-scope="scope" v-if="!scope.row.isAdministrator">
            <!-- <el-button size="mini" type="text" @click="position(scope.row)">
              定位
            </el-button> -->
            <el-button size="mini" style="color:red;" type="text" @click="handleDel(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </wpwork-table>
      <pagination :total="total" :page.sync="listQuery.currentPage" :limit.sync="listQuery.pageSize"
        @pagination="initData" />
      <wpworkMap :initialCoordinates="initialCoordinates" v-if="locationVisible2" @close="mapRtn" />
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import wpworkMap from "@/components/wpworkMap/index.vue";

export default {
  name: 'fence',
  components: {
    wpworkMap,
  },
  data() {
    return {
      initialCoordinates: [],
      locationVisible2: false,
      tableData: [],
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        keyword: '',
        startTime: '',
        endTime: '',
        name: '',
      },
      total: 0,

    }
  },
  watch: {

  },
  computed: {

  },
  created() {
    this.getOrganizeList(true)
  },
  methods: {
    handleDel(value) {
      this.$confirm('此操作将删除该条记录, 是否继续?', '提示', {
        type: 'warning'
      }).then(() => {
        request({
          url: `/api/example/gpsInfo/deleteDataOne`,
          method: "post",
          data: value
        }).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg,
            });
          }
          this.initData()
        })
      }).catch(() => { })
    },
    search() {
      this.initData()
    },
    getOrganizeList(isInit) {
      if (isInit) this.initData()
    },
    initData() {
      this.listLoading = true
      this.listLoading = true
      console.log("🚀 ~ :135 ~ initData ~ this.listQuery:", this.listQuery)
      this.listQuery.startTime = this.listQuery.startTime ? this.listQuery.startTime : ''
      this.listQuery.endTime = this.listQuery.endTime ? this.listQuery.endTime : ''
      this.listQuery.name = this.listQuery.name ? this.listQuery.name : ''
      request({
        url: `/api/example/gpsInfo/fenceQuery`,
        method: "post",
        params: this.listQuery
      }).then((res) => {
        console.log("🚀 ~ :122 ~ initData ~ res:", res)
        this.tableData = res.data.records;
        this.total = res.data.total
        this.tableData.forEach(item => {
        })
        console.log("🚀 ~ :112 ~ initData ~ this.tableData:", this.tableData)
        this.listLoading = false
      });
    },
    formatTimestamp(timestamp) {
      const date = new Date(timestamp);
      console.log("🚀 ~ :117 ~ formatTimestamp ~ date:", date)

      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
      const day = String(date.getDate()).padStart(2, '0');

      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    reset() {
      this.listQuery.startTime = ''
      this.listQuery.endTime = ''
      this.listQuery.name = ''
      this.initData()
    },
    position(row) {
      console.log("🚀 ~ :167 ~ position ~ row:", row)
      this.initialCoordinates = JSON.parse(row.executionLocation);
      this.locationVisible2 = true;
    },
    mapRtn() {
      this.locationVisible2 = false
    },
  }
}
</script>
<style lang="scss" scoped>
.user-form {
  margin-top: 65px;
  height: 92%;
}
@media (max-width: 1268px) {
  .user-form {
    margin-top: 98px;
  }
}
@media (max-width: 768px) {
  .user-form {
    margin-top: 168px;
  }
}
>>> .icon-ym {
  font-size: 12px !important;
}
</style>